import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Image, StyleSheet, Text, TouchableOpacity, View, ViewPropTypes} from "react-native";
import {AppColors, AppFonts, AppSizes, AppStyles} from '@theme/';
import {Actions} from "react-native-router-flux";

/**
 * 状态栏
 */
export default class StatusBar extends Component {

  static propTypes = {
    containerStyle: ViewPropTypes.style,
    title: PropTypes.string,
    onLeft: PropTypes.func,
    onRight: PropTypes.func,
    hideNavBar: PropTypes.boolean,
  };

  static defaultProps = {
    rightButtonImage: undefined,
    hideNavBar: false,
  };

  render() {
    super.render();
    const {containerStyle, title, rightButtonImage, onRight, hideNavBar} = this.props;

    return (
      <View style={[styles.barContainer, {containerStyle}]}>

        {!!hideNavBar ? <View style={{marginLeft: 10, width: 60}}/> :
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => {
              Actions.pop();
            }}
          >
            <View style={{marginLeft: 10, width: 60, flexDirection: 'row', justifyContent: 'flex-start'}}
            >
              <Image
                source={require('@assets/images/ic_arrow_left.png')}
              />
            </View>
          </TouchableOpacity>
        }

        <Text style={[AppStyles.navbarTitle]}>
          {title}
        </Text>


        {rightButtonImage === undefined ? <View style={{marginRight: 10, width: 60}}/> :
          <TouchableOpacity
            activeOpacity={0.7}
            onPress={onRight}
          >
            <View
              style={{marginRight: 10, width: 60, flexDirection: 'row', justifyContent: 'flex-end'}}>
              {rightButtonImage}
            </View>
          </TouchableOpacity>}
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    barContainer: {
      flexDirection: 'row',
      backgroundColor: '#eeeeee',
      width: AppSizes.screen.width,
      height: AppSizes.navbarHeight,
      justifyContent: 'space-between',
      alignItems: 'center',
    },
  }
)
